//
//  RankView.swift
//  shop
//
//  Created by chen on 2025/5/12.
//

import SwiftUI

struct RankView: View {
    
    @StateObject private var vm: RankViewModel = RankViewModel.shared
    
    @State private var selectedTab: Int = 1
    
    @EnvironmentObject private var router: Router
    
    var body: some View {
        ZStack{
            Color.gray.opacity(0.1)
                .ignoresSafeArea()
            
            VStack(spacing: 0) {
                // 导航栏
                ZStack{
                    Text("热门榜单")
                        .font(.system(size: 17))
                        .bold()
                        .padding(.vertical, 10)
                    
                    HStack(spacing: 0){
                        Spacer()
                        
                        HStack(spacing: 5){
                            Button(action: {
                                router.to(.searchView)
                            }) {
                                Image(systemName: "magnifyingglass")
                                    .foregroundColor(.black)
                            }
                        }
                        .padding(.trailing, 5)
                    }
                    .padding(.horizontal, 10)
                    .padding(.vertical, 10)
                }
                .background(.white)

                // Tab 选项卡
                ScrollViewReader { proxy in
                    ScrollView(.horizontal, showsIndicators: false) {
                        HStack(spacing: 25) {
                            ForEach(vm.rankList, id: \.rankType) { item in
                                Text("\(item.rankName)")
                                    .font(.system(size: 16))
                                    .foregroundColor(selectedTab == item.rankType ? .red : .black)
                                    .frame(height: 40)
                                    .id(item.rankType)
                                    .onTapGesture {
                                        withAnimation {
                                            selectedTab = item.rankType
                                            proxy.scrollTo(item.rankType, anchor: .center)
                                        }
                                    }
                            }
                        }
                        .padding(.horizontal)
                    }
                    .onChange(of: selectedTab) { newValue in
                        withAnimation {
                            proxy.scrollTo(newValue, anchor: .center)
                        }
                    }
                }
                
                // Tab 内容区域
                TabView(selection: $selectedTab) {
                    ForEach(vm.rankList, id: \.rankType) { item in
                        ScrollView(showsIndicators: false){
                            LazyVStack(spacing: 10){
                                if let list = vm.rankMap[item.rankType] {
                                    ForEach(list, id: \.id) { item in
                                        Button {
                                            router.to(.detailView(id: item.id))
                                        } label: {
                                            RankCard(item: item)
                                        }
                                        .buttonStyle(PlainButtonStyle())
                                    }
                                }
                            }
                            .padding(.bottom, 10)
                            .onAppear{
                                vm.getRankList(rankType: item.rankType)
                            }
                        }
                        .tag(item.rankType)
                    }
                }
                .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
            }
        }
        .navigationBarBackButtonHidden(true)
    }
}

#Preview {
    RankView()
        .environmentObject(Router.shared)
}
